<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- <div v-if="90<=score">优秀</div>
    <div v-else-if="60<score && score<90">差不多</div>
    <div v-else>不太行</div> -->

    <button @click="flag=!flag">切换</button>

    <!-- 1. v-if和v-show都可以实现元素的展示和隐藏 -->
    <!-- 2. v-if是真实移除dom结构     v-show是操作css样式实现隐藏 -->
    <!-- 3. v-if有更高的切换浪费      v-show是有更高的初始渲染浪费 -->
    <!-- 4. 如果这个元素需要频繁切换展示隐藏 用 v-show， 其他情况用 v-if  -->
    <div v-if="flag">if的展示</div>
    <div v-show="flag">show的展示</div>
  </div>
  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        score: 61,
        flag: false
      }
    })
  </script>
</body>
</html>